<template>
  <div class="user">
    <el-row class="topw">
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>企业管理</el-breadcrumb-item>
          <el-breadcrumb-item>信息管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row style="padding:10px 0">
      <el-col :span="24">
        <!-- 给组件绑定原生事件的话，需要一个.native的修饰符 -->
        <el-input placeholder="请输入内容" class="search-input" v-model="enterpriseName" @keydown.native.enter="initList">
          <el-button slot="append" icon="el-icon-search" @click="initList"></el-button>
        </el-input>
        <el-button type="success" plain @click="addDialogFormVisible=true">添加用户</el-button>
      </el-col>
    </el-row>
    <el-table class="margin-20" v-loading="loading" :data="userList" border style="width: 100%">
      <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="企业名称：">
            <span>{{ props.row.enterpriseName }}</span>
          </el-form-item>
          <el-form-item label="企业法人姓名：">
            <span>{{ props.row.enterprisePerson }}</span>
          </el-form-item>
          <el-form-item label="企业法人联系方式：">
            <span>{{ props.row.mobile }}</span>
          </el-form-item>
          <el-form-item label="企业注册地址：">
            <span>{{ props.row.enterpriseAddress }}</span>
          </el-form-item>
          <el-form-item label="邮箱：">
            <span>{{ props.row.email }}</span>
          </el-form-item>
          <el-form-item label="注册机构号：">
            <span>{{ props.row.institutionNumber }}</span>
          </el-form-item>
          <el-form-item label="企业注册时间：">
            <span>{{ props.row.registrationTime }}</span>
          </el-form-item>
          <el-form-item label="主营项目：">
            <span>{{ props.row.mainProject }}</span>
          </el-form-item>
          <el-form-item label="入驻时间：">
            <span>{{ props.row.createTime }}</span>
          </el-form-item>
          <el-form-item label="园区房间号：">
            <span>{{ props.row.roomNumber }}</span>
          </el-form-item>
          <el-form-item label="园区房间面积：">
            <span>{{ props.row.proportion }}</span>
          </el-form-item>
          <el-form-item label="绿植登记：">
            <span>{{ props.row.greenPlants }}</span>
          </el-form-item>
          <el-form-item label="网络登记：">
            <span>{{ props.row.network }}</span>
          </el-form-item>
          <el-form-item label="账号：">
            <span>{{ props.row.username }}</span>
          </el-form-item>
          <el-form-item label="密码：">
            <span type="password">******************</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column prop="enterpriseName" label="企业名称" width="180">
      </el-table-column>
      <el-table-column prop="enterprisePerson" label="企业法人名称" width="180">
      </el-table-column>
      <el-table-column prop="mobile" label="企业联系方式">
      </el-table-column>
      <el-table-column prop="enterpriseAddress" label="企业注册地址">
      </el-table-column>
      <el-table-column label="操作" width="190">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="showEditDialog(scope.row)">
          </el-button>
          <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="showDeleteDialog(scope.row)">
          </el-button>
          <el-button size="mini" type="info" plain icon="el-icon-setting" @click="resetPassword(scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
        :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 添加用户对话框 -->
    <el-dialog title="添加用户" :visible.sync="addDialogFormVisible">
      <el-form :model="addForm" label-width="140px" :rules="rules" ref="addUserForm">
        <el-form-item label="企业名称:" prop="enterpriseName">
          <el-input v-model="addForm.enterpriseName" auto-complete="off" ></el-input>
        </el-form-item>
        <el-form-item label="企业法人姓名:" prop="enterprisePerson">
          <el-input v-model="addForm.enterprisePerson" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="企业法人联系方式:" prop="mobile">
          <el-input v-model="addForm.mobile" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司注册地址:" prop="enterpriseAddress">
          <el-input v-model="addForm.enterpriseAddress" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：:" prop="email">
          <el-input v-model="addForm.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="注册机构号:" prop="institutionNumber">
          <el-input v-model="addForm.institutionNumber" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="企业注册时间:" prop="registrationTime">
          <el-date-picker
            v-model="addForm.registrationTime"
            @change="dateChangebirthday2"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="企业注册时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="企业入驻时间:" prop="inTheTime">
          <el-date-picker
            v-model="addForm.inTheTime"
            @change="inTheTimedateChangebirthday2"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="企业入驻时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="主营项目:" prop="mainProject">
          <el-input v-model="addForm.mainProject" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="园区房间号:" prop="roomNumber">
          <el-input v-model="addForm.roomNumber" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="面积(平方米):" prop="proportion">
          <el-input v-model="addForm.proportion" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="绿植登记:" prop="greenPlants">
          <el-input v-model="addForm.greenPlants" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="网络登记:" prop="network">
          <el-input v-model="addForm.network" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号:" prop="username">
          <el-input v-model="addForm.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password" >
          <el-input v-model="addForm.password" type="password" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserSubmit('addUserForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑用户对话框 -->
    <el-dialog title="编辑用户" :visible.sync="editDialogFormVisible">
      <el-form :model="editForm" label-width="140px" :rules="rules" ref="editUserForm">
        <el-form-item label="企业名称:" prop="enterpriseName">
          <el-input v-model="editForm.enterpriseName" auto-complete="off" ></el-input>
        </el-form-item>
        <el-form-item label="企业法人姓名:" prop="enterprisePerson">
          <el-input v-model="editForm.enterprisePerson" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="企业法人联系方式:" prop="mobile">
          <el-input v-model="editForm.mobile" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司注册地址:" prop="enterpriseAddress">
          <el-input v-model="editForm.enterpriseAddress" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="editForm.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="注册机构号:" prop="institutionNumber">
          <el-input v-model="editForm.institutionNumber" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="企业注册时间:" prop="registrationTime">
          <el-date-picker
            v-model="editForm.registrationTime"
            @change="editFormdateChangebirthday2"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="企业注册时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="企业入驻时间:" prop="registrationTime">
          <el-date-picker
            v-model="editForm.inTheTime"
            @change="inTheTimeeditFormdateChangebirthday2"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="企业入驻时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="主营项目:" prop="mainProject">
          <el-input v-model="editForm.mainProject" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="园区房间号:" prop="roomNumber">
          <el-input v-model="editForm.roomNumber" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="面积(平方米):" prop="proportion">
          <el-input v-model="editForm.proportion" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="绿植登记:" prop="greenPlants">
          <el-input v-model="editForm.greenPlants" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="网络登记:" prop="network">
          <el-input v-model="editForm.network" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号:" prop="username">
          <el-input v-model="editForm.username" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password" >
          <el-input v-model="editForm.password" type="password" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserSubmit('editUserForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getUserList,
    changeUserState,
    addUser,
    getUserById,
    editUser,
    deleteUser,
    getRoleList,
    grantUserRole,
    resetUser,
    fuzzyUser
  } from '@/api'
  export default {
    data() {
      var mobile = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          console.log(reg.test(value));
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
          }
        }
      }
      return {
        userList: [],
        total: 0,
        pagesize: 10,
        pagenum: 1,
        enterpriseName:"",
        addDialogFormVisible: false,
        addForm: {
          username: '',
          password: '',
          email: '',
          enterpriseName: '',
          enterprisePerson: '',
          mobile: '',
          enterpriseAddress: '',
          institutionNumber: '',
          mainProject: '',
          roomNumber: '',
          proportion: '',
          registrationTime:'',
          greenPlants: '',
          network: '',
          username: '',
          password: '',
          inTheTime:''
        },
        editDialogFormVisible: false,
        editForm: {
          username: '',
          password: '',
          email: '',
          enterpriseName: '',
          enterprisePerson: '',
          mobile: '',
          enterpriseAddress: '',
          institutionNumber: '',
          mainProject: '',
          roomNumber: '',
          proportion: '',
          greenPlants: '',
          registrationTime:'',
          network: '',
          username: '',
          inTheTime:'',
          password: '',
          enterpriseInformationId:''
        },
        grantDialogFormVisible: false,
        roleList: [],
        roleId: '',
        // 添加用户的表单验证
        rules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          enterpriseName: [{
            required: true,
            message: '请输入企业名称',
            trigger: 'blur'
          }],
          enterprisePerson: [{
            required: true,
            message: '请输入企业法人姓名',
            trigger: 'blur'
          }],
          enterpriseAddress: [{
            required: true,
            message: '请输入公司注册地址',
            trigger: 'blur'
          }],
          institutionNumber: [{
            required: true,
            message: '请输入注册机构号',
            trigger: 'blur'
          }],
          institutionNumber:[{
            required: true,
            message: '请输入企业注册时间',
            trigger: 'blur'
          }],
          mainProject: [{
            required: true,
            message: '请输入主营项目',
            trigger: 'blur'
          }],
          inTheTime: [{
            required: true,
            message: '请输入企业入驻时间',
            trigger: 'blur'
          }],
          roomNumber: [{
            required: true,
            message: '请输入园区房间号',
            trigger: 'blur'
          }],
          proportion: [{
            required: true,
            message: '请输入园区房间面积',
            trigger: 'blur'
          }],
          mobile: [{
            validator: mobile,
            trigger: 'blur',
            required: true,
            },
          ]
        }
      }
    },
    created() {
      this.initList()
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pagesize = val
        this.initList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pagenum = val
        this.initList()
      },
      editFormdateChangebirthday2(val) {
        console.log(val)
        this.editForm.registrationTime = val
      },
      dateChangebirthday2(val) {
        console.log(val)
        this.addForm.registrationTime = val
      },
      inTheTimeeditFormdateChangebirthday2(val) {
        console.log(val)
        this.editForm.inTheTime = val
      },
      inTheTimedateChangebirthday2(val) {
        console.log(val)
        this.addForm.inTheTime = val
      },
      initList() {
        this.loading = true
        fuzzyUser({
          params: {
            enterpriseName:this.enterpriseName,
            page: this.pagenum-1,
            size : this.pagesize,
            sortField: 'createTime',
            sortType:'dsc'
          }
        }).then(res => {
          console.log(res)
          this.userList = res.data.content
          this.total = res.data.totalElements
          this.loading = false
        })
      },
      // closeDiaglog(){
      //   this.$refs['addUserForm'].resetFields()
      // },
      // 添加用户
      addUserSubmit(formName) {
        console.log(12312)
         this.$refs[formName].validate(valide => {
          if (valide) {
            console.log(123213)
            addUser(this.addForm).then(res => {
              console.log(res)
              if (res.status === 0) {
                this.$message({
                  type: 'success',
                  message: '创建用户成功'
                })
              this.initList()
              } else {
                this.$message({
                  type: 'warning',
                  message: res.message
                })
              }
              this.addDialogFormVisible = false
            })
          }
        })
      },
      // 显示编辑用户对话框
      showEditDialog(row) {
        console.log(row)
        this.editDialogFormVisible = true
        getUserById({
          params: {
            enterpriseInformationId:row.enterpriseInformationId
          }
        }).then(res => {
          console.log(res)
          console.log(res.data)
            this.editForm.registrationTime = res.data.registrationTime
            this.editForm.username = res.data.username
            this.editForm.enterpriseName = res.data.enterpriseName
            this.editForm.enterprisePerson = res.data.enterprisePerson
            this.editForm.mobile = res.data.mobile
            this.editForm.enterpriseAddress = res.data.enterpriseAddress
            this.editForm.institutionNumber = res.data.institutionNumber
            this.editForm.mainProject = res.data.mainProject
            this.editForm.inTheTime = res.data.inTheTime
            this.editForm.roomNumber = res.data.roomNumber
            this.editForm.proportion = res.data.proportion
            this.editForm.greenPlants = res.data.greenPlants
            this.editForm.network = res.data.network
            this.editForm.password = res.data.password
            this.editForm.email = res.data.email
            this.editForm.enterpriseInformationId = res.data.enterpriseInformationId
        })
      },
      // 编辑用户提交
      editUserSubmit(formName) {
        this.$refs[formName].validate(valide => {
          if (valide) {
            console.log(this.editForm)
            editUser(this.editForm).then(res => {
              console.log(res)
              if (res.status === 0) {
                this.$message({
                  type: 'success',
                  message: '编辑成功'
                })
                this.editDialogFormVisible = false
                this.initList()
              } else {
                this.$message({
                  type: 'warning',
                  message: res.message
                })
              }
            })
          }
        })
      },
      // 显示删除对话框
      showDeleteDialog(row) {
        console.log(row)
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 执行删除用户操作
          deleteUser({
          params: {
            enterpriseInformationId:row.enterpriseInformationId
          }
        }).then(res => {
            if (res.status === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.initList()
            } else {
              this.$message({
                type: 'warning',
                message: res.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      resetPassword(row) {
        // console.log(row)
        this.$confirm('此操作将重置密码为初始密码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          resetUser({
            params: {
            enterpriseInformationId:row.enterpriseInformationId
          }
          }).then(res =>{
            console.log(res)
            this.$message({
            type: 'success',
            message: '重置密码成功!'
          });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    }
  }

</script>
<style lang="scss" scoped>
  .user {
    .margin-20 {
      margin: 20px 0;
    }

    .search-input {
      width: 300px;
    }

    .page {
      padding: 5px 0;
      background-color: #D3DCE6;
    }
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-left: 50px;
    margin-bottom: 0;
    width: 100%;
  }

</style>
